In Svelte, scoped styling allows you to write CSS inside a component without affecting elements outside of it. Styles defined in a <style> block are automatically scoped to the component, preventing conflicts with other components.
Svelte achieves scoped styles by adding unique attributes to the component's HTML elements and corresponding CSS selectors. This ensures that the styles apply only to the elements in that component.
If you want a style to apply globally rather than being scoped to the component, you can use the :global() modifier.
Styles inside a
<style>block are scoped to the component by default.Use
:global()when you need styles to affect elements outside the component.Component-level scoping prevents CSS conflicts and makes components more reusable.
You can still use class names, IDs, and nested selectors—the scoping mechanism handles isolation automatically.